<template>
  <section class="report">
    <div class="table-container">
      <el-table
        v-loading="loading"
        element-loading-text="Loading..."
        :data="patientsInfo"
        border
        height="100%"
        style="width: 100%"
        @cell-click="handleShow"
      >
        <el-table-column fixed align="center">
          <template #header> 患者信息 </template>
          <template #default="{ row }">
            <div style="display: flex; justify-content: space-between; margin: 1rem 0">
              <p>床号：{{ row.bedNo }}</p>
              <p>性别：{{ row.ptnSex == 1 ? "男" : "女" }}</p>
            </div>
            <div
              style="display: flex; justify-content: space-between; margin-bottom: 1rem"
            >
              <p>姓名：{{ row.ptnName }}</p>
              <p>年龄：{{ row.age }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="重点事件" prop="nurseGrade" align="center" />
        <el-table-column label="诊断信息" prop="diagnosis" align="center" />
        <el-table-column align="center" min-width="160">
          <template #header>
            <div>
              <p style="text-align: center; color: #4697f7">白班</p>
              <div class="custom-header">
                <span v-for="(item, i) in status" :key="i"
                  >{{ item }}：{{ handoverShiftData[0][i] }}</span
                >
              </div>
            </div>
          </template>
          <template #default="{ row }">
            {{ row.baiban }}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="160">
          <template #header>
            <div>
              <p style="text-align: center; color: #4697f7">上夜班</p>
              <div class="custom-header">
                <span v-for="(item, i) in status" :key="i"
                  >{{ item }}：{{ handoverShiftData[1][i] }}</span
                >
              </div>
            </div>
          </template>
          <template #default="{ row }">
            {{ row.syeban }}
          </template>
        </el-table-column>
        <el-table-column align="center" min-width="160">
          <template #header>
            <div>
              <p style="text-align: center; color: #4697f7">下夜班</p>
              <div class="custom-header">
                <span v-for="(item, i) in status" :key="i"
                  >{{ item }}：{{ handoverShiftData[2][i] }}</span
                >
              </div>
            </div>
          </template>
          <template #default="{ row }">
            {{ row.xyeban }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <footer class="report-footer">
      <img
        src="../../assets/images/preview.svg"
        alt=""
        @click="handleChangeDay('preview')"
      />
      <span @click="handleChangeDay('preview')">前一天</span>
      <span>{{ createTime }}（{{ getWeek(createTime) }}）</span>
      <span @click="handleChangeDay('next')">后一天</span>
      <img src="../../assets/images/next.svg" alt="" @click="handleChangeDay('next')" />
      <span style="color: #4697f7" @click="handleCilckToday">今天</span>
    </footer>
  </section>
  <UseTemplate :show="showUseTemplate">
    <el-form label-width="100">
      <el-form-item label="模版类型：">
        <el-select
          v-model="templateId"
          placeholder="请选择模版类型"
          @change="handleTemplateTypeChange"
        >
          <el-option
            v-for="item in templateList"
            :key="item.id"
            :label="item.type"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="内容：">
        <el-input
          v-model="editContent"
          :rows="4"
          type="textarea"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleSubmmit">提交</el-button>
        <el-button size="small" @click="showUseTemplate = false">关闭</el-button>
      </el-form-item>
    </el-form>
  </UseTemplate>
</template>

<script setup>
import UseTemplate from "./component/useTemplate.vue";
import {
  get_patientStatusTotal,
  get_patientList,
  get_template,
  add_BsData,
} from "@/apis/handover.js";
import { getWeek, getPreOrNextDay } from "@/utils/myDateTime.js";
import { dayjs } from "element-plus";
import { ref } from "vue";
//患者信息
let patientsInfo = ref([
  {
    searchValue: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    remark: null,
    params: {},
    operationType: null,
    id: 0,
    hospitalNo: "",
    ptnName: "",
    ptnIdentityNo: "",
    ptnSex: 0,
    birthday: "",
    ptnMobile: null,
    ptnMarry: null,
    ptnNation: null,
    ptnAddress: null,
    ptnCountry: "",
    ptnOccupation: null,
    ptnNative: null,
    ptnWorkPlace: null,
    ptnPhoto: null,
    delFlag: null,
    adTime: "",
    age: 0,
    diagnosis: "",
    qrCode: null,
    ptnStatus: null,
    nurLevel: 0,
    disTime: "",
    disSign: 0,
    isAllergy: null,
    docId: null,
    docCode: "",
    docName: "",
    nurId: null,
    nurCode: "",
    nurName: "",
    bedId: null,
    bedNo: "",
    bedName: null,
    ptnFamily: "",
    deptId: null,
    deptCode: "",
    deptName: "",
    wardId: null,
    wardCode: "",
    wardName: "",
    careColor: null,
    hisId: "",
    payWay: "",
    cardNo: "",
    deptList: null,
    wardType: null,
    inHospitalDays: null,
    attn: "",
    attnPhone: "",
    address: null,
    high: null,
    weight: "",
    temp: "",
    pulse: "",
    heart: null,
    breath: "",
    blood: "",
    shit: null,
    urine: null,
    patientTatus: "",
    tubeDocCode: "",
    tubeDocName: "",
    baiban: null,
    syeban: null,
    xyeban: null,
    skinTest: null,
    attnRelation: "",
    serious: "",
    hhQueryFlag: null,
    selfcareScore: null,
    selfcareGrade: null,
    bardenScore: null,
    bardenGrade: null,
    morseScore: null,
    morseGrade: null,
    conduitScore: null,
    conduitGrade: null,
    fileFlag: null,
    nurseGrade: "",
    count: null,
  },
]);
//交接班班次数据
let handoverShiftData = ref([
  {
    11: "0",
    dept_code: "0",
    bc: "0",
    12: "0",
    13: "0",
    create_time: "",
    0: "0",
    1: "0",
    2: "0",
    3: "0",
    4: "0",
    5: "0",
    6: "0",
    7: "0",
    8: "0",
    9: "0",
    id: 0,
    10: "0",
  },
  {},
  {},
]);
//报告创建时间
let createTime = ref(dayjs(new Date()).format("YYYY-MM-DD"));
let loading = ref(true); //表格加载状态
//病人状态
const status = [
  "死亡",
  "入院",
  "出院",
  "现有",
  "转入",
  "转出",
  "病危",
  "手术",
  "分娩",
  "抢救",
  "一级护理",
  "特护",
  "陪护",
  "原有",
];

let showUseTemplate = ref(false); //控制显示排班编辑弹窗
let templateList = ref([]); //模版列表
let templateId = ref(); //选择的模版id
let editContent = ref(
  '{"baiban": "测试白班","syeban": "测试上夜班","xyeban": "测试下夜班"}'
); //交接班编辑内容
let hospitalNo = ref(); //添加交接班报告对应的患者住院号

//获取患者信息
async function getPatientsInfo() {
  loading.value = true;
  let res = await get_patientList({ CreateTime: createTime.value });
  patientsInfo.value = res.rows;
  loading.value = false;
}
getPatientsInfo();
// 获取交接班班次数据
async function getHandoverShiftData() {
  let res = await get_patientStatusTotal({ createTime: createTime.value });
  handoverShiftData.value = res.rows;
}
getHandoverShiftData();

//获取前一天或后一天的交接班班次数据
function handleChangeDay(val) {
  // if (createTime.value == dayjs(new Date()).format("YYYY-MM-DD") && val === "next")return;
  createTime.value = getPreOrNextDay(val, createTime.value);
  getHandoverShiftData();
  getPatientsInfo();
}
//点击获取当天交接班班次数据
function handleCilckToday() {
  createTime.value = dayjs(new Date()).format("YYYY-MM-DD");
  getHandoverShiftData();
  getPatientsInfo();
}

// 点击显示排班编辑窗口
async function handleShow(val) {
  showUseTemplate.value = true;
  hospitalNo.value = val.hospitalNo;
  let res = await get_template();
  templateList.value = res.rows;
}

//选择模版类型同事更新回显内容
function handleTemplateTypeChange() {
  templateList.value.forEach((item) => {
    if (item.id === templateId.value) {
      editContent.value = item.content;
    }
  });
}
/**
 * 添加病室报告 白班 上夜班 下夜班数据
 * baiban 白班
 * syeban 上夜班
 * xyeban 下夜班
 * hospitalNo 住院号
 * createTime 创建时间
 * type 类型 PC：0  白班：1
 */
async function handleSubmmit() {
  let createTime = dayjs(new Date()).format("YYYY-MM-DD");
  let content = JSON.parse(editContent.value);
  let data = { ...content, hospitalNo: hospitalNo.value, type: "1", createTime };

  let res = await add_BsData({ jsonData: JSON.stringify(data) });
  if (res.code === 200) {
    getPatientsInfo();
    showUseTemplate.value = false;
  }
}
</script>

<style lang="scss" scoped>
.report {
  height: 100%;
  background: #fff;
  padding: 2vh 1vw 0 1vw;
  display: flex;
  flex-direction: column;
  .table-container {
    flex: 1;
    overflow-y: auto;
    :deep(.el-table) {
      font-size: 0.8vw;
      th.el-table__cell.is-leaf {
        background: #e2e2e2;
        .custom-header {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 0.2vh;
          > span {
            font-size: 0.7vw;
          }
        }
      }
    }
  }

  .report-footer {
    text-align: center;
    padding: 1vh;
    > span {
      margin: 0 2vw;
    }
  }
}
</style>
